<template>
  <div id="readUserBtn">
    <ul>
      <!-- `system:${from === 'readMin' ? 'myRead' : 'read'}:addPraise` -->
      <template
        v-permission="
          `wh:system:${from === 'readMin' ? 'myRead' : 'read'}:addPraise`
        "
      >
        <li v-for="item in btnNum" :key="item" @click="addUp(item)">
          <i class="el-icon-thumb"></i>{{ item }}
        </li>
        <li @click="showUp"><i class="el-icon-thumb"></i>批量加赞</li>
        <!-- <li @click="showUpTime"><i class="el-icon-thumb"></i>限时批量加赞</li> -->
        <li @click="delUp"><i class="el-icon-thumb"></i>取消点赞</li>
      </template>
      <!-- `system:${from === 'readMin' ? 'myRead' : 'read'}:putTop` -->
      <template
        v-permission="
          `wh:system:${from === 'readMin' ? 'myRead' : 'read'}:putTop`
        "
        v-if="item.publishStatus === 'PUBLISHED'"
      >
        <li v-if="item.topping === 'N'" @click="setTop">
          <i class="fa fa-chevron-circle-up"></i>置顶
        </li>
        <li v-if="item.topping === 'Y'" @click="cancelTop">
          <i class="fa fa-chevron-circle-down"></i>取消置顶
        </li>
      </template>
      <!-- `system:${from === 'readMin' ? 'myRead' : 'read'}:delete` -->
      <li
        v-permission="
          `wh:system:${from === 'readMin' ? 'myRead' : 'read'}:delete`
        "
        @click="delItemFunc"
      >
        <i class="el-icon-delete"></i>删除
      </li>
      <!-- `system:${from === 'readMin' ? 'myRead' : 'read'}:edit` -->
      <li
        v-permission="
          `wh:system:${from === 'readMin' ? 'myRead' : 'read'}:edit`
        "
        v-if="item.userProperty != 'USER'"
        @click="showEdit"
      >
        <i class="fa fa-edit"></i>编辑
      </li>
      <li
        v-permission="
          `wh:system:${from === 'readMin' ? 'myRead' : 'read'}:checkCommont`
        "
        @click="showCommon"
      >
        <i class="el-icon-chat-dot-round"></i>查看评论
      </li>
    </ul>
    <commonDrawer
      v-if="drawerDialog.isShow"
      :dialogData="drawerDialog"
    ></commonDrawer>
    <dialogUp
      v-if="dialogUpData.isShow"
      :dialog-data="dialogUpData"
      @addUp="addUp"
    ></dialogUp>
    <dialogUpTime
      v-if="dialogUpTData.isShow"
      :dialog-data="dialogUpTData"
      @addUpTime="addUpTime"
    ></dialogUpTime>
    <!-- 删除弹窗 -->
    <delDialog
      v-if="delDialogData.isShow"
      :del-dialog-data="delDialogData"
      @reasonDel="reasonDel"
    ></delDialog>
  </div>
</template>

<script>
import { delSingle, top, unTop } from '@/api/readManagement/readPreserve' // 接口
import delDialog from '@component/common/delDialog' // 删除弹窗
import dialogUp from '@common/dialogUp' // 批量点赞弹窗
import dialogUpTime from '@common/dialogUpTime' // 限时批量点赞弹窗
import commonDrawer from '@common/commonDrawer' // 查看评论-抽屉弹窗
import { praises, timePraise, cancelPraises } from '@/api/common/likesAPI'
export default {
  name: 'readUserBtn',
  msg: '阅读图文管理-文章维护/我的发布-点赞、删除...按钮',
  components: {
    dialogUp,
    dialogUpTime,
    delDialog,
    commonDrawer
  },
  props: ['item', 'index', 'btnNum', 'title', 'from', 'powerAry'], // from-"readMin"(我的发布)/"readPre"(文章维护)
  data() {
    return {
      categoryType: 13, // 1.社团 2.活动 3.作品 4.文章 5.回放视频 8.生活 13.阅读
      id: '', // item.jobcompletionId
      dialogUpData: {
        // 批量加赞
        isShow: false, // 默认隐藏
        params: '' // 编辑时，传递的参数
      },
      dialogUpTData: {
        // 限时批量加赞
        isShow: false, // 默认隐藏
        params: '' // 编辑时，传递的参数
      },
      delDialogData: {
        isShow: false, // 默认隐藏
        type: '删除' // 类型
      },
      drawerDialog: {
        //抽屉显示/隐藏
        isShow: false, // 默认隐藏
        topicType: '',
        id: ''
      }
    }
  },
  mounted() {
    this.id = this.item.id
  },
  methods: {
    /* 点赞 */
    async addUp(n, type = n) {
      let obj = {
        topicId: this.item.id, //类型对应的id
        topicCreatedBy: this.item.userId, //创建人
        topicType: type, //点赞类型(批量点赞传:batch， 其他点赞类型传对应的点赞数量)
        number: n, //当前点赞数量
        categoryType: this.categoryType,
        contentType: 'TEXT' // 类型-图文 【TEXT】 小视频【VIDEO】
      }
      let isSuccess = await praises(obj)
      if (isSuccess) {
        // this.$emit('refresh')
        this.item.likeCount++
        if (n === '1') return
        this.$store.commit('setPraiseSpeed', {
          index: this.index,
          blockName: `read_${this.from}_up`
        })
      }
    },
    /* 批量加赞 */
    showUp() {
      this.dialogUpData.isShow = true
    },
    /* 限时批量加赞弹窗显示 */
    showUpTime() {
      this.dialogUpTData.isShow = true
    },
    /* 限时批量加赞 */
    async addUpTime(n, timeStr) {
      let obj = {
        topicId: this.item.id,
        topicCreatedBy: this.item.userId,
        topicType: 'batch', //点赞类型(批量点赞传:batch， 其他点赞类型传对应的点赞数量)
        number: n,
        startTime: timeStr,
        categoryType: this.categoryType,
        contentType: 'TEXT' // 作品内类-图文 【TEXT】 小视频【VIDEO】
      }
      let isSuccess = await timePraise(obj)
      if (isSuccess) {
        /*this.$emit('refresh')*/
        this.$store.commit('setPraiseSpeed', {
          index: this.index,
          blockName: `read_${this.from}_UpTime`
        })
      }
    },
    /* 取消点赞 */
    async delUp() {
      let obj = {
        topicId: this.item.id,
        topicCreatedBy: this.item.userId,
        categoryType: this.categoryType
      }
      let isSuccess = await cancelPraises(obj)
      if (isSuccess) {
        this.$emit('refresh')
        this.$store.commit('setPraiseSpeed', {
          index: this.index,
          blockName: `read_${this.from}_UpTime`,
          isAdd: false
        })
        this.$store.commit('setPraiseSpeed', {
          index: this.index,
          blockName: `read_${this.from}_up`,
          isAdd: false
        })
      }
    },
    /* 编辑弹窗显示 */
    showEdit() {
      this.$emit('showEdit', this.id)
    },
    /* 删除 */
    delItemFunc() {
      if (this.from === 'readPre') {
        //来自文章维护
        this.delDialogData.isShow = true
        this.delDialogData.type = '删除'
      } else {
        //来自文章管理-我的发布
        this.noResonDel()
      }
    },
    /*有原因删除*/
    reasonDel(res) {
      let type = this.delDialogData.type
      this.$confirm(`${type}理由：${res} 确认${type}该条视频？`, '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let obj = {
          manualReason: res
        }
        delSingle(
          this.id,
          obj,
          (response) => {
            this.$emit('refresh')
          },
          (response) => {
            this.$message.warning('删除失败，' + response.message)
          }
        )
        this.delDialogData.isShow = false
      })
    },
    /*无原因删除*/
    noResonDel() {
      this.$confirm('确定删除该条文章吗?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let obj = {
          manualReason: ''
        }
        delSingle(
          this.id,
          obj,
          (response) => {
            this.$emit('refresh')
          },
          (response) => {
            this.$message.warning('删除失败，' + response.message)
          }
        )
      })
    },
    /* 置顶 */
    setTop() {
      let obj = {
        categoryId: this.item.college, //学院ID
        contentType: 'TEXT', //阅读类型TEXT
        topType: 'ARTICLE' //置顶的数据类型ARTICLE
      }
      top(this.id, obj, (response) => {
        this.$emit('refresh')
      })
    },
    /* 取消置顶 */
    cancelTop() {
      unTop(this.id, (response) => {
        this.$message.success('操作成功')
        this.$emit('refresh')
      })
    },
    /*查看评论*/
    showCommon() {
      this.drawerDialog.isShow = true
      this.drawerDialog.topicType = 'ARTICLE'
      this.drawerDialog.id = this.item.id
      this.drawerDialog.from = this.from
      this.drawerDialog.name =
        this.from === 'readMin'
          ? 'wh:readPubilsh:commentList'
          : 'wh:readManage:commentList'
    }
  }
}
</script>

<style lang="less">
#readUserBtn {
  padding-top: 20px;
  ul {
    overflow: hidden;
    font-size: 28px;
    color: #666;
    li {
      float: left;
      margin-right: 35px;
      cursor: pointer;
      line-height: 40px;

      i {
        margin-right: 5px;
      }
    }
  }
}
</style>
